<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			el与data的2种写法
						1.el有2种写法
									(1).第一种：
											new Vue时候配置el属性（css选择器字符串 或 亲自获取的DOM元素）。
									(2).第二种：
											先创建Vue实例，随后再通过：vm.$mount('#demo')指定服务的容器。
									(3).用哪一种呢？随意，只不过第二种更灵活一点
											例如：可以在Vue实例对象创建n秒以后，再指定容器。

						2.data有2种写法
									(1).第一种对象式：
												data:{name:'尚硅谷'}
									(2).第二种函数式：
												data(){
													return {
														name:'尚硅谷'
													}
												}
									如何选择? 目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
										
						3.一个重要的原则：
									由Vue管理的函数（现阶段我们只学了个data函数，别的没学呢），
									一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>学校名称：{{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false
		
		//el的第一种写法——借助el配置项
		//#region 
		/* new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷'
			}
		}) */
		//#endregion
	
		//el的第二种写法——借助vm.$mount(选择器)
		//#region 
		/* const vm = new Vue({
			data:{
				name:'尚硅谷'
			}
		})
		vm.$mount('#demo') */
		//#endregion
		
		//data的第一种写法—— 对象式
		//#region 
		/* new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷'
			}
		}) */
		//#endregion
		
		//data的第二种写法—— 函数式，现阶段我们可以把data直接写成一个对象，但学到了组件后，data就必须是一个函数了！
		new Vue({
			el:'#demo',
			data(){
				console.log(this) //data函数必须写成普通函数，这样其中的this才是vm
				return {
					name:'尚硅谷'
				}
			}
		})

	</script>
</html>